esri loader + Arcgis api 3.x加载 arcgis server 地图服务

留言

默认是加载4.x的api在线连接。使用3.x的api需要手动调用链接。

1. template部分，需要绑定id，和纯js的相同
1
2
3
<template>
  <div id="map"></div>
</template>
2. 导包部分
1
import { loadScript, loadCss, loadModules } from 'esri-loader'
3. export接口部分
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
export default {
  name: 'web-map',
  mounted() {
    loadScript({ url: 'https://js.arcgis.com/3.28/' })
    loadCss('https://js.arcgis.com/3.28/esri/css/esri.css')

    loadModules(['esri/map', 'esri/geometry/Extent', 'esri/layers/ArcGISDynamicMapServiceLayer', 'dojo/domReady!'], { css: true })
      .then(([Map, Extent, ArcGISDynamicMapServiceLayer]) => {
        var tjUAVurl = 'http://localhost:6080/arcgis/rest/services/shopping/payMon_zenzhag/MapServer'
        var map = new Map('map', {
          // extent: extent1,
          logo: false
        })
        var tjUAVLayer = new ArcGISDynamicMapServiceLayer(tjUAVurl)

        map.addLayer(tjUAVLayer)
      })
  },
  beforeDestroy() {
    if (this.view) {
      // destroy the map view
      this.view.container = null
    }
  }
}